<!--
-->
<template>
    <vxe-modal v-model="visible" :position="{top: '60px'}" :title="title" destroy-on-close  :min-width="layout.modalMinWidth(700)" resize show-footer show-maximize  :width="layout.modalWidth(1000)" :height="layout.modalHeight()" @close="cancelClick">
        <div class="flex-container">
            <div class="org-tree">
                <div class="org-title"><span>组织部门</span>
                    <el-checkbox v-model="hasChildren">包含子组织</el-checkbox>
                </div>
                <el-tree :data="state.orgTree" :expand-on-click-node="false" :props="{label: 'name', children: 'children'}" highlight-current @node-click="(org) => onOrgSelected(org)"/>
            </div>
            <div v-loading="state.isUserLoading" class="all-user">
                <!--<el-transfer v-model="state.model.selectedUserList" :titles="['用户', '已选用户']" filterable :data="state.userList" :props="{ key: 'id', label: 'realName',}"/>-->
                <ChooseUserList v-if="state.userList&&state.userList.length>0" v-model="state.model.selectedUserList" :left-list="state.userList" :orgIds="requestBody.sysOrgIds" :titles="['用户', '已选用户']" style="height: 700px"/>
            </div>
        </div>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                保存
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const requestBody = reactive({
    sysOrgIds: []
})

// 查询组织数据
async function loadOrgTree() {
    const {success, data} = await api.GetOrgTreeList();
    if (success) {
        data.unshift({name: "全部", id: null})
        state.orgTree = data;
        requestBody.sysOrgIds = [];
    }
}


// 查询列表
async function loadUserList() {
    const body = {
        ...requestBody
    }
    if (body.sysOrgIds.length === 0) {
        body.sysOrgIds = null
    }
    state.isUserLoading = true;
    const {success, data} = await api.GetUserList(body);
    state.isUserLoading = false;
    if (!success) return 0;
    state.userList = data || [];
}

// 选中了分类
const hasChildren = ref(true);

function getAllTreeId(item) {
    let ids = [item.id];
    if (item.children && item.children.length > 0) {
        for (let i = 0; i < item.children.length; i++) {
            ids = ids.concat(getAllTreeId(item.children[i]))
        }
    }
    return ids;
}
// 选中了组织
function onOrgSelected(org) {
    console.primary("选中的组织", hasChildren.value, org)
    if (hasChildren.value) {
        requestBody.sysOrgIds = getAllTreeId(org)
    } else {
        requestBody.sysOrgIds = [org.id];
    }
    requestBody.sysOrgIds = requestBody.sysOrgIds.filter(id => id);
}

// 查询已选人员
function loadSelectedUserList() {
    api.GetUserList({sysOrgIds: [state.options.id]}).then(({success, data}) => {
        if (!success) return;
        state.model.selectedUserList = (data || []).map(item => item.id)
    })
}


// 表单显示
async function show(config) {
    setOptions(config);
    state.model = {selectedUserList: []}
    requestBody.sysOrgIds = [];
    loadOrgTree();
    loadUserList()
    loadSelectedUserList()
}

function beforeSubmit() {
    submit(state.model.selectedUserList)
}

async function submit(list) {
    isSubmitting.value = true
    const body = {
        orgId: state.options.id,
        bureauId: state.options.bureauId,
        areaCode: state.options.areaCode,
        userIdList:list
    }
    const {success, data} = await api.UpdateOrgUserList(body);
    isSubmitting.value = false
    if (!success) return;
    $message.success("操作成功")
    submitSuccess()
}
defineExpose({
    show
})
</script>


<style lang="scss" scoped>

.flex-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;

    .org-tree {
        width: 30%;
        box-sizing: border-box;
        padding-right: 10px;
        padding-bottom: 6px;
        max-height: 700px;
        overflow: auto;
    }

    .all-user {
        width: calc(70%);
        box-sizing: border-box;
        padding-right: 10px;
    }

    .org-title {
        border-left: 2px solid var(--el-color-primary);
        padding: 4px 10px;
        margin-bottom: 10px;
        background: #f1f1f1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
